<template>
	<div>
		<div class="mainBox">
			<!-- 下拉框查询 -->
			<el-form :inline="true" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="formBox">
				<el-row :gutter="20">
					<el-col :span="8">
						<el-form-item label="会员姓名" prop="name">
							<el-input placeholder="会员姓名" v-model="ruleForm.name"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="会员账号" prop="phoneQuery">
							<el-input placeholder="请输入会员账号" v-model="ruleForm.phoneQuery"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="secondRow_formItem">
							<el-button type="primary" @click="submitForm('ruleForm')">积分明细查询</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>
	<div class="tableBox">
			<div class="jfdk">
				<span>积分明细汇总</span>
			</div>
			<div class="export">
				<el-button type="info" icon="el-icon-download" size="small" @click="exportExcel2">导出</el-button>
			</div>
			<el-table :data="tableData2" style="width:100%" stripe border id="out-table2" v-loading="tableLoadingAll">
				<el-table-column type="index" label="序号" width="80" :index="dealIndex2" center></el-table-column>
				<el-table-column prop="bs" label="消费类型" center>
				 <template slot-scope="scope">
            <span v-if="scope.row.bs=='deduction'">抵扣记录</span>
            <span v-if="scope.row.bs=='enter'">入账记录</span>           
        </template>
				</el-table-column>
				<el-table-column prop="memberValue" label="会员姓名" center></el-table-column>
				<el-table-column prop="integral" label="积分抵扣" center></el-table-column>
				<el-table-column prop="number" label="消费单号" center></el-table-column>
				<el-table-column prop="storeValue" label="消费门店" center></el-table-column>
				<el-table-column prop="money" label="消费金额" center></el-table-column>
				<el-table-column prop="createTime" label="消费时间" center></el-table-column>
			</el-table>
			<el-pagination style="padding:20px 0;text-align:center;" @size-change="handleSizeChange2" @current-change="handleCurrentChange2" :current-page="current2" :page-sizes="[2, 5, 10, 20, 50]" :page-size="size2" layout="total,sizes,prev,pager,next,jumper" :total="total2">
			</el-pagination>
		</div>

		<div class="tableBox">
			<div class="jfdk">
				<span>积分抵扣记录</span>
			</div>
			<div class="export">
				<el-button type="info" icon="el-icon-download" size="small" @click="exportExcel">导出</el-button>
			</div>
			<el-table :data="tableData" style="width:100%" stripe border id="out-table" v-loading="tableLoadingOut">
				<el-table-column type="index" label="序号" width="80" :index="dealIndex" center></el-table-column>
				<el-table-column prop="memberValue" label="会员姓名" center></el-table-column>
				<el-table-column prop="deductionIntegral" label="积分抵扣" center></el-table-column>
				<el-table-column prop="deductionNumber" label="抵扣单号" center></el-table-column>
				<el-table-column prop="storeValue" label="消费门店" center></el-table-column>
				<el-table-column prop="deductionMoney" label="消费金额" center></el-table-column>
				<el-table-column prop="createTime" label="消费时间" center></el-table-column>
			</el-table>
			<el-pagination style="padding:20px 0;text-align:center;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current" :page-sizes="[2, 5, 10, 20, 50]" :page-size="size" layout="total,sizes,prev,pager,next,jumper" :total="total">
			</el-pagination>
		</div>
		<div class="tableBox">
			<div class="jfdk">
				<span>积分入账记录</span>
			</div>
			<div class="export">
				<el-button type="info" icon="el-icon-download" size="small" @click="exportExcel1">导出</el-button>
			</div>
			<el-table :data="tableData1" style="width:100%" stripe border v-loading="tableLoadingIn" id="out-table1">
				<el-table-column type="index" label="序号" width="80" :index="dealIndex1" center></el-table-column>
				<el-table-column prop="memberValue" label="会员姓名" center></el-table-column>
				<el-table-column prop="enterIntegral" label="积分入账" center></el-table-column>
				<el-table-column prop="consumptionNumber" label="入账单号" center></el-table-column>
				<el-table-column prop="storeValue" label="消费门店" center></el-table-column>
				<el-table-column prop="consumptionMoney" label="消费金额" center></el-table-column>
				<el-table-column prop="createTime" label="消费时间" center></el-table-column>
			</el-table>
			<el-pagination style="padding:20px 0;text-align:center;" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page="current1" :page-sizes="[2, 5, 10, 20, 50]" :page-size="size1" layout="total,sizes,prev,pager,next,jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
import { integralEnterLogOut, integralEnterLogInList,integralEnterLogAll} from "@/api/user";
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("手机号不能为空！"));
      } else if (!/^1[3456789]\d{9}$/.test(value)) {
        callback(new Error("手机格式有误"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        name: "",
        phoneQuery: ""
      },
      current: 1,
			current1: 1,
      current2: 1,			
      size: 10,
			size1: 10,
      size2: 10,			
      total: 0,
			total1: 0,
      total2: 0,
		  tableData: [],
			tableData1: [],
			tableData2: [],
      tableLoadingOut: false,
			tableLoadingIn: false,
			tableLoadingAll:false,
      rules: {
        // name: [{
        // 		required: true,
        // 		message: '请输入名字',
        // 		trigger: 'blur'
        // 	},
        // 	{
        // 		min: 1,
        // 		max: 5,
        // 		message: '长度在 1 到 5 个字符',
        // 		trigger: 'blur'
        // 	}
        // ],
        phoneQuery: [
          {
            validator: checkPhone,
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.integralEnterLogOut();
					this.integralEnterLogInList();
					this.integralEnterLogAll()
        } else {
          return false;
        }
      });
    },
    handleSizeChange(val) {
      this.size = val;
      this.integralEnterLogOut();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.integralEnterLogOut();
    },
    handleSizeChange1(val) {
      this.size1 = val;
      this.integralEnterLogInList();
    },
    handleCurrentChange1(val) {
      this.current1 = val;
      this.integralEnterLogInList();
		},
		  handleSizeChange2(val) {
      this.size2 = val;
      this.integralEnterLogAll();
    },
    handleCurrentChange2(val) {
      this.current2 = val;
      this.integralEnterLogAll();
		},
		//汇总
		integralEnterLogAll(){
			this.tableLoadingAll=true
			integralEnterLogAll({
        memberId: this.ruleForm.phoneQuery,
        current: this.current2,
        size: this.size2
      }).then(res=>{
				if(res.code==200){
	      this.tableData2=res.data.records
				this.total2=res.data.total
					this.tableLoadingAll=false
			
				}
				else{
					this.$message.error(res.msg)
					this.tableLoadingAll=false
				}
			})
		},
    // 抵扣积分记录导出
    exportExcel() {
      /* 从表生成工作簿对象 */
      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象。
          //Blob 表示的不一定是JavaScript原生格式的数据。
          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: "application/octet-stream" }),
          //设置导出文件名称
          "sheetjs.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    exportExcel1() {
      /* 从表生成工作簿对象 */
      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table1"));
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象。
          //Blob 表示的不一定是JavaScript原生格式的数据。
          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: "application/octet-stream" }),
          //设置导出文件名称
          "sheetjs.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
		},
		exportExcel2() {
      /* 从表生成工作簿对象 */
      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table2"));
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象。
          //Blob 表示的不一定是JavaScript原生格式的数据。
          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: "application/octet-stream" }),
          //设置导出文件名称
          "sheetjs.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    integralEnterLogOut() {
      this.tableLoadingOut = true;
      integralEnterLogOut({
        memberId: this.ruleForm.phoneQuery,
        current: this.current,
        size: this.size
      })
        .then(res => {
          if (res.code == 200) {
            this.tableLoadingOut = false;
            this.tableData = res.data.records;
            this.total = res.data.total;
          } else {
            this.tableLoadingOut = false;

            this.$message.error(res.msg);
          }
        })
        .catch(res => {
          this.$message.error("服务器错误");
          this.tableLoadingOut = false;
        });
    },
    integralEnterLogInList() {
      this.tableLoadingIn = true;
      integralEnterLogInList({
        memberId: this.ruleForm.phoneQuery,
        current: this.current1,
        size: this.size1
      })
        .then(res => {
          if (res.code == 200) {
            this.tableData1 = res.data.records;
            this.tableLoadingIn = false;
            this.total1 = res.data.total;
          } else {
            this.$message.error(res.msg);
            this.tableLoadingIn = false;
          }
        })
        .catch(() => {
          this.tableLoadingIn = false;
          this.$message.error("服务器错误");
        });
    },
    dealIndex(index) {
      var self = this;
      return index + 1 + (self.current - 1) * self.size;
    },
    dealIndex1(index) {
      var self = this;
      return index + 1 + (self.current1 - 1) * self.size1;
		},
		  dealIndex2(index) {
      var self = this;
      return index + 1 + (self.current2 - 1) * self.size2;
    }
  }
};
</script>

<style>
.formBox {
  margin-top: 20px;
}
.tableBox {
  margin: 120px 20px 0 20px;
}
tableBox1 {
  margin: 80px 20px 0 20px;
}
.export {
  text-align: right;
  margin-bottom: 30px;
}
.jfdk {
  text-align: center;
  font-size: 29px;
  color: #999999;
  line-height: 25px;
  margin: 40px 0 20px 0;

  letter-spacing: 1px;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

</style>
